<template>
   
    <div id="mains" class="mains login-main">
        <div class="login" id="login">
            <section class="order-main-header">
                <mt-header title="" >
                <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
                </mt-header>
            </section>
            <div class=" load-content">
                <div class=" load-main" >
                    <dl class="user-title">
                        <dt></dt>
                        <dd>登录</dd>
                    </dl>
                    <dl class="login-logo">
                        <img src="../../assets/login-logo.png">
                    </dl>
                    <div class="user-form">
                        <div class="user-input-group">
                            <input growing-ignore="true" name="login_name" v-model="loginData.name" placeholder="请输入手机号/邮箱">
                        </div>
                        <div class="user-input-group">
                            <input growing-ignore="true" name="password" v-model="loginData.pwd" placeholder="请输入密码" type="password">
                        </div>
                        <div class="user-input-group keycode-group" v-show="needValidate">
                            <input growing-ignore="true" name="keycode" v-model="keycode" placeholder="请输入验证码" >
                            <div class="keycodeBtn" @click="getCode" :style="btnColor">
                            {{keycodeTip}}
                            </div>
                        </div>
                        <div id="captcha_wrap">
                        <router-link to="/forget">忘记密码?</router-link>
                        </div>
                        <div class="user-submit-group">
                            <button class="user-submit" @click="sureLogin">
                                <span>马上登录</span>
                            </button>
                        </div>
                    </div>
                    <div class="toRegister">没有账号，<router-link to="/register">立即注册</router-link></div>
                </div>
                <!-- 滑块 -->
                <Geet :isGeet="isgt" @geetPath="GeetPath" @clickChange="GeetChange"></Geet>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';//导入toast组件
import Geet from "./Geet.vue";
 import {mapMutations, mapActions} from 'vuex';
export default {
  data () {
    return {
      phone: {
        user_mail: '',
        user_phone: '',
        user_account_extra: '',
        user_password: '',
      },
      email: {
        user_mail: '',
        user_phone: '',
        user_account_extra: '',
        user_password: '',
      },
      activeIndex: "phone",
      sendSMSSetInterval: '',
      loginData:{
        name:'',
        pwd:'',
      },
      keycode:'',
      isgt: false,
      needValidate: false,
      keycodeTip:'获取验证码',
      btnColor:'color:#5298f1'
    }
  },
  components: {
      Geet
  },
  methods: {
        ...mapMutations([
                'SET_HOME_PAGE'
            ]),
      handleClose(){
          this.SET_HOME_PAGE({homePage:1});
           this.$router.push("/home");
      },
    handleSelect (activeIndex,form) {
          if( activeIndex!="phone"){
        this.$refs['phone'].clearValidate();
      }else{
           this.$refs['email'].clearValidate();
      }
      this.activeIndex = activeIndex;
      this.phone = {
        user_mail: '',
        user_phone: '',
        user_account_extra: '',
        user_password: '',
      }
      this.email = {
        user_mail: '',
        user_phone: '',
        user_account_extra: '',
        user_password: '',
      }
    },
    //发送短信
    sendSMS (mode) {
      if (mode === 'phone') {
       
        let phoneReg = /^1[34578]\d{9}$/
        if (!phoneReg.test(this.phone.user_phone)) {
          document.getElementById('phoneSMS').innerHTML = '获取验证码'
          this.$alerts('error', '电话号码不正确')
          return
        }
        this.$http.post('', this.$http.fucDate('message.sendOut.SMS', {
          user_mail: null,
          user_phone: this.phone.user_phone,
          type: 1
        })).then((res) => {
          if (res.data.data.type === 200) {
            this.$alerts('success', '发送成功')
            let scend = 60
            this.sendSMSSetInterval = setInterval(() => {
              scend--
              document.getElementById("phoneSMS").innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + scend + "s&nbsp;&nbsp;&nbsp;&nbsp;"
              if (scend === 0) {
                document.getElementById('phoneSMS').innerHTML = '获取验证码'
                clearInterval(this.sendSMSSetInterval);
              }
            }, 1000);
          } else {
            document.getElementById('phoneSMS').innerHTML = '获取验证码'
            this.$alerts('error', '失败')
          }
        })
      }
      if (mode === 'email') {
        let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!emailReg.test(this.email.user_mail)) {
          document.getElementById('emailSMS').innerHTML = '获取验证码'
          this.$alerts('error', '邮箱不正确')
          return
        }
        this.$http.post('', this.$http.fucDate('message.sendOut.SMS', {
          user_mail: this.email.user_mail,
          user_phone: null,
          type: 1
        })).then((res) => {
          if (res.data.data.type === 200) {
            this.$alerts('success', '发送成功')
            let scend = 60
            this.sendSMSSetInterval = setInterval(() => {
              scend--
              document.getElementById('emailSMS').innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + scend + "s&nbsp;&nbsp;&nbsp;&nbsp;"
              if (scend === 0) {
                document.getElementById('emailSMS').innerHTML = '获取验证码'
                clearInterval(this.sendSMSSetInterval);
              }
            }, 1000);
          } else {
            document.getElementById('emailSMS').innerHTML = '获取验证码'
            this.$alerts('error', '失败')
          }
        })
      }
    },
    getCode() {
      if(this.keycodeTip != '获取验证码'){
        return
      }
      this.$http.post('/v1/sendLoginCode',{
            name:this.loginData.name,
            areaCode:'+86'
        }).then(res=>{
              res = res.data
              if(res.code == 200){
                this.keycodeTip = 60
                this.btnColor = 'color:#ddd'
                var timeId = setInterval(function(){
                  this.keycodeTip--
                  if(this.keycodeTip == 0){
                    clearInterval(timeId)
                    this.btnColor = 'color:#5298f1'
                    this.keycodeTip = '获取验证码'
                  }
                }.bind(this),1000)
              }else if(res.code == 1){
                Toast('非法请求')
              }else if(res.code == 5){
                Toast('账号未注册')
              }else if(res.code == 6){
                Toast('账号已被禁用')
              }
        }).catch(err=>{

        })
    },
    // 极验图片加载之后，通过更改控制变量实现可以再次加载
    GeetChange(val) {
        this.isgt = val;
    },
    GeetPath(val) {
        this.isgt = false;
        var data = this.loginData
        this.$http.post('/v1/login',data).then(res => {
          res = res.data
          if(res.code == 200){
               document.getElementsByTagName("body")[0].className="page-finance page-index";
            this.$router.push('/');
          }else if(res.code == 6 || res.code == 7){
           // Toast('非常用设备，请进行验证码验证')
            this.needValidate = true
          }else if(res.code==3){
              Toast("操作频繁，请2小时后再试")
          }else if (res.code == 4) {
                 Toast('密码错误，剩余可尝试次数为'+ res.data +'次');
           } 
        }).catch(res => {
          console.warn(res)
        })
    },
    sureLogin() {
      if(this.needValidate){
        if(!this.keycode){
          Toast('请输入验证码')
          return
        }else{
          this.$http.post('/v1/secLogin',{code:this.keycode}).then(res=>{
            res = res.data
            if(res.code == 200){
              this.$router.push('/#/')
            }else if(res.code == 100){
              Toast('请先发送验证码')
            }else if(res.code == 101){
              Toast('发送验证码频繁，请2小时候再试')
            }else if(res.code == 102){
              Toast('验证码错误，剩余可尝试次数为'+ res.data +'次')
            } else if (res.code == 1) {
                Toast("非法操作");
             } 
          }).catch(err=>{
              Toast(err.data)
          })
        }
        return
      }
      var data = this.loginData
      if(!data.name){
        Toast('请输入登录账号')
        return
      }
      if(!data.pwd){
        Toast('请输入登录密码')
        return
      }
      this.isgt = !this.isgt;
    }
  },
  mounted () {
      document.getElementsByTagName("body")[0].className="login-body page-finance page-index";
            !function (w) {
            InitView();
            var evt = "onorientationchange" in w ? "orientationchange" : "resize";
            w.addEventListener(evt, function () {
                InitView()
            }, false);
            function InitView() {
                var t = 750*0.5,
                    w = screen.width,
                    h = screen.height,
                    a = w / t,
                    n = w.viewMeta || document.createElement('meta');
                    a=0.9;
                w.viewMeta || document.getElementsByTagName("head")[0].appendChild(n);
                n.setAttribute('name', 'viewport');
                n.setAttribute('content', "width=" + t + ", initial-scale=" + a + ",maximum-scale=" + a + ",minimum-scale=" + a + ", user-scalable=no,target-densitydpi=device-dpi,minimal-ui,uc-fitscreen=no");
                window.viewPortNum = a;
            }
            w.showPlaceholder = 1;
        }(window);
        var PAGE = location.pathname.replace(new RegExp('/(?:\\w{2}-\\w{2}/)?'), "").split('/')[0];
        window.onbeforeunload = function () {
            localStorage.removeItem('isPublicPage')
             };
  },
  destroyed () {
    clearInterval(this.sendSMSSetInterval);
  }
}
</script>

<style lang='less' scoped>
.login-main{
    .login-logo{
        height: 120px;
        line-height: 120px;
        width: 100%;
        text-align: center;
        img{
            width: 80px;
            height: 80px;
        }
    }
#login{
  font-size: 16px;
}
.user-title{
  font-size: 24px;
  font-family:PingFang SC;
  font-weight:bold;
  color:#E0E0F9;
  padding-left: 30px;
  margin-top: 20px;
}
.user-form{
  width: 100%;
}
.user-input-group {
        padding-bottom: 1px;
         border-bottom: 1px solid rgba(134, 134, 192, 1);
        margin: 16px 20px 0;
        height: 50px;
        display: flex;
    input {
      
          border:none;
             outline: none;
            width: 100%;
            line-height: 50px;
            height:50px;
            font-size: 16px;
              color: rgba(134, 134, 192, 1);
            // margin-bottom: 57px;
            padding-left: 19px;
            background: #161736;
  }
}
  
.keycode-group{
  .keycodeBtn{
    width: 250px;
    height: 100%;
    border: 0px solid #222240;
    border-left: none;
    line-height: 58px;
    text-align: center;
  }
}
#captcha_wrap {
    padding: 6px 2px;
     color: #E0E0F9;
    font-size: 14px;
    display: flex;
    justify-content:flex-end;
    text-decoration:underline;
      text-align: right;
      margin-top: 5px;
    a{
     padding-right: 30px;
        color: #E0E0F9;
    }
}
.user-submit-group {
    height: 68px;
    padding: 24px 20px  0 14px;
    display: flex;
    justify-content: center;
}
.user-submit-group button.disabled, .user-submit-group button:disabled {
    background: #c5cfd5;
}

.user-submit-group button {
    width: 90%;
    height: 43px;
    line-height: 43px;
    text-align: center;
    background: rgba(82, 152, 241, 1);
    font-size: 14px;
    color: #fff;
    border-radius:4px;
    margin: 0 auto;
}
button {
    border: none;
    outline: none;
    -webkit-appearance: none;
    background: transparent;
}
.toRegister{
  margin-top: 8px;
  text-align: center;
  color:#E0E0F9;
  a{
    text-decoration: none;
    color:rgba(82, 152, 241, 1);
  }
}
}
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 16px;
    }
    ::-moz-placeholder { /* Firefox 19+ */  
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 16px;
    }
    :-ms-input-placeholder { /* IE 10+ */ 
        color: rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 16px;
    }
    :-moz-placeholder { /* Firefox 18- */ 
        color:rgba(134, 134, 192, 1);
        letter-spacing: 1px;
         font-size: 16px;
    }
    .mint-header{
    height: 50px;
    background-color: #161736;
}
.order-main-header{
    height: 50px;
}
 .load-content{
           position: absolute;
           top:90px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch;
           width: 100%;
       }
       .load-main{
           height: 100%;
       }

     .mint-toast-text{
    font-size: 16px;
}
</style>